import { transformConfig,transform2px } from '@/utils/customModule';
import { Image, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import React from 'react';
import { navigateTo } from '../../ModuleImg/utils';
import './index.scss';

const styleConfig = {
  img: {
    width: '{{px(imageSize)}}',
    height: '{{px(imageSize)}}',
    borderRadius: '{{px(borderRadius)}}'
  },

  color: ['color', 'backgroundColor'],
};

const ModuleNavOneLine = ({ navList, styleSettingRender }) => {
  const style = transformConfig(styleSettingRender, styleConfig);

  // navList.length = 5;

  return (
    <View className="ModuleNavOneLine" style={{ 
      ...style.module, 
      ...style.color,
      borderRadius:transform2px(styleSettingRender.cardRadius) 
    }}>
      <View
        className={classNames('', {
          container: navList.length <= 5,
          'container-slide': navList.length > 5,
        })}
      >
        {navList?.map(({ imgUrl, name, url }) => {
          return (
            <View
              className="nav-item"
              key={imgUrl}
              onClick={() => {
                if(!url || url == '#') return;
                if(url.includes('ant.shop/i/m/')){
                  Taro.getLocation({
                    type: 'gcj02',
                    isHighAccuracy: true,
                    timeout: 5000,
                    complete:res=>{
                      Taro.navigateTo({
                        url:`/pages/fineEngine/webView?url=${encodeURIComponent(url)}`
                      })
                    }
                  });
                  return;
                }
                if(url.includes('http')){
                  Taro.navigateTo({
                    url:`/pages/fineEngine/webView?url=${encodeURIComponent(url)}`
                  })
                  return;
                }
                navigateTo(`${url}&name=${name}`);
              }}
            >
              <Image src={imgUrl} className="img" style={style.img} />
              <View className="txt">{name}</View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default ModuleNavOneLine;
